<template>
  <div>
    <div class="commoditys">
      <div class="commodity" @click="fun(v)" v-for="(v, index) in recommendgoods1" :key="index">
        <!-- 图片 -->
        <img :src="v.img1" alt="" />
        <div class="text">
          <!-- 京东超市 -->
          <p>
            <img
              src="https://img12.360buyimg.com/img/s88x28_jfs/t1/201732/29/26359/1848/62fb657fE53cd4619/710369802b423cd8.png"
              v-if="v.isrecommend == 1" alt="" />
            &nbsp;{{ v.proname }}
          </p>
          <!-- 价格 -->
          <span class="money1">￥</span><span class="money2" v-text="v.originprice"></span>
          <span class="money3">.00</span>
          <!-- 打折卷1 -->
          <!-- <span
            class="discount"
            v-if="v.discount != ''"
          >{{v.discount}}折</span> -->
          <!-- 打折卷2 -->
          <span class="discount1" style="line-height: 20px" v-if="v.discount != ''">{{ v.discount }}折</span>

          <div class="down">
            <!-- 是否显示自营 -->
            <span class="zy" v-if="v.issale"></span>
            <!-- 是否显示评论 -->
            <span class="left" v-if="v.isseckill == 1">{{ v.originprice }}条评论</span>

            <span class="right" v-if="v.isseckill != 1">看相似</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
let service = axios.create();
export default {
  props: ['x'],
  data() {
    return {
      recommendgoods1: [],
    };
  },
  mounted() {
    service({
      url: "http://118.178.238.19:3001/api/pro/search", //页面加载发请求
      methed: "get",
    }).then((res) => {
      this.recommendgoods1 = res.data.data;
    });
    // console.log(this.x);
    if (this.x != undefined) {
      this.recommendgoods1 = this.x
    }
  },
  methods: {
    //跳转详情页面
    fun(v) {
      // this.$router.push(`/goods/${v.proid}`)        //点击商品跳到商品详情
      this.$router.push({
        path: "/ProductDetails",
        query: {
          proid: v.proid,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.commoditys {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.commoditys .commodity {
  width: 48.66666667vw;
  height: 77.33333333vw;
  border-radius: 1.33333333vw;
  background-color: #fff;
  margin-top: 2vw;
  margin-left: 0.66666667vw;
  margin-right: 0.66666667vw;
  overflow: hidden;
}

.commoditys .commodity img {
  width: 48.66666667vw;
  height: 46vw;
  margin: 0 auto;
}

.commoditys .commodity .text {
  width: 46vw;
  height: 32vw;
}

.commoditys .commodity .text p {
  height: 10.93333333vw;
  overflow: hidden;
  color: #434343;
  margin-left: 2.66666667vw;
  margin-top: 2.66666667vw;
  margin-bottom: 1.33333333vw;
}

.commoditys .commodity .text p img {
  margin-top: 1.33333333vw;
  width: 11.73333333vw;
  height: 3.2vw;
}

.commoditys .commodity .text .money1 {
  color: #ff4142;
  font-size: 4.26666667vw;
  margin-left: 2.66666667vw;
}

.commoditys .commodity .text .money2 {
  color: #ff4142;
  font-size: 5.33333333vw;
}

.commoditys .commodity .text .money3 {
  color: #ff4142;
  font-size: 4.26666667vw;
}

.commoditys .commodity .text .discount {
  border: 0.13333333vw solid #ff4142;
  border-radius: 1.33333333vw;
  width: 14.13333333vw;
  height: 4.8vw;
  font-size: 3.2vw;
  color: #ff4142;
  display: inline-block;
  text-align: center;
}

.commoditys .commodity .text .discount1 {
  display: inline-block;
  overflow: hidden;
  background: 3vw 0.25vw/14.33333vw 4.6vw url(https://img12.360buyimg.com/img/s117x28_jfs/t1/110239/22/8394/797/5e6750c3E9e371aae/db1efce584d923c2.png) no-repeat;
  width: 17.33333333vw;
  height: 4.8vw;
  font-size: 3.2vw;
  color: #ff4142;
  text-align: center;
}

.commoditys .commodity .text .down {
  height: 5.33333333vw;
  width: 40.53333333vw;
  display: flex;
  justify-content: space-between;
  font-size: 1.6vw;
  margin-left: 2.66666667vw;
  margin-top: 2.66666667vw;
}

.commoditys .commodity .text .down .left {
  color: #999;
}

.commoditys .commodity .text .down .zy {
  width: 6.4vw;
  height: 3.2vw;
  background: 0vw 0vw / 6.4vw 3.2vw url(https://img12.360buyimg.com/img/s48x28_jfs/t1/127567/8/7519/1313/5f165ca9Ea295fca1/b90967cc602f446a.png) no-repeat;
}

.commoditys .commodity .text .down .right {
  color: #262626;
  width: 13.33333333vw;
  height: 5.33333333vw;
  background-color: #f2f2f2;
  border-radius: 2.66666667vw;
  text-align: center;
}
</style>